<template>
  <view class="calendar-container">
    <!-- 月份选择器 -->
    <view class="month-selector">
      <picker mode="date" fields="month" @change="onMonthChange">
        <view class="picker-text">{{ currentYear }}年{{ currentMonth }}月</view>
      </picker>
    </view>

    <!-- 日历格子 -->
    <view v-for="(row, rowIndex) in 7" :key="rowIndex" class="calendar-row">
      <view
        v-for="(col, colIndex) in 9"
        :key="colIndex"
        :class="['calendar-cell', getCellColor(rowIndex, colIndex)]"
        @click="toggleColor(rowIndex, colIndex)"
      >
        <text v-if="dateMatrix[rowIndex][colIndex]">
          {{ dateMatrix[rowIndex][colIndex] }}
        </text>
      </view>
    </view>

    <!-- 图例 -->
    <view class="legend">
      <view class="legend-item"><view class="legend-box safe"></view>安全</view>
      <view class="legend-item"><view class="legend-box danger"></view>危险</view>
      <view class="legend-item"><view class="legend-box warn"></view>警告</view>
      <view class="legend-item"><view class="legend-box empty"></view>未标记</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth() + 1;

    return {
      currentYear: year,
      currentMonth: month,
      dateMatrix: [],
      colorMatrix: [],
      colorSequence: ['empty', 'safe', 'danger', 'warn'],
      structure: {
        0: [3, 4, 5],
        1: [3, 4, 5],
        2: [0, 1, 2, 3, 4, 5, 6, 7, 8],
        3: [0, 1, 2, 3, 4, 5, 6, 7, 8],
        4: [3, 4, 5],
        5: [3, 4, 5],
        6: [3, 4, 5]
      }
    };
  },
  onLoad() {
    this.generateMatrix();
  },
  methods: {
    getDaysInMonth(year, month) {
      return new Date(year, month, 0).getDate();
    },
    generateMatrix() {
      const daysInMonth = this.getDaysInMonth(this.currentYear, this.currentMonth);
      const dateMatrix = Array.from({ length: 7 }, () => Array(9).fill(null));
      const colorMatrix = Array.from({ length: 7 }, () => Array(9).fill('empty'));
      let day = 1;

      for (let row = 0; row < 7; row++) {
        for (let col of this.structure[row]) {
          if (day <= daysInMonth) {
            dateMatrix[row][col] = day++;
          }
        }
      }

      this.dateMatrix = dateMatrix;
      this.colorMatrix = colorMatrix;
    },
    onMonthChange(e) {
      const [year, month] = e.detail.value.split('-').map(Number);
      this.currentYear = year;
      this.currentMonth = month;
      this.generateMatrix(); // 重新生成该月的日历
    },
    toggleColor(row, col) {
      if (!this.dateMatrix[row][col]) return;
      const current = this.colorMatrix[row][col];
      const nextIndex = (this.colorSequence.indexOf(current) + 1) % this.colorSequence.length;
      this.$set(this.colorMatrix[row], col, this.colorSequence[nextIndex]);
    },
    getCellColor(row, col) {
      if (this.dateMatrix[row][col] === null) return 'hidden';
      return this.colorMatrix[row][col];
    }
  }
};
</script>

<style scoped>
.calendar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40rpx;
}
.month-selector {
  margin-bottom: 30rpx;
}
.picker-text {
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
}
.calendar-row {
  display: flex;
}
.calendar-cell {
  width: 80rpx;
  height: 80rpx;
  margin: 4rpx;
  border-radius: 10rpx;
  border: 2rpx solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #fff;
  box-sizing: border-box;
}
.safe {
  background-color: #4caf50;
}
.danger {
  background-color: #f44336;
}
.warn {
  background-color: #ff9800;
}
.empty {
  background-color: #9e9e9e;
}
.hidden {
  background-color: transparent;
  border: none;
}
.legend {
  margin-top: 40rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30rpx;
}
.legend-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
}
.legend-box {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  border-radius: 4rpx;
}
.legend-box.safe {
  background-color: #4caf50;
}
.legend-box.danger {
  background-color: #f44336;
}
.legend-box.warn {
  background-color: #ff9800;
}
.legend-box.empty {
  background-color: #9e9e9e;
}
</style>
